<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百叶窗效果</title>
		<style>
		*{margin:0;padding:0}
			ul{ height:500px;}
			li{height: 100px; list-style: none; overflow: hidden; }
			img{ height: 500px; position: absolute;}
			p{ height: 100px;position: relative; overflow:hidden;}
			
		</style>
	</head>
	<script src="js/jquery.js"></script>
	<script>
	$(document).ready(function(){
		$('img').wrap('<p></p>');
		$('img:even').addClass('one');
		$('img:odd').addClass('two');
		var cishu=0;
		function baiyechuang(){
		$('p').css({height:100})
		$('img:even').attr('src','img/'+((cishu+1)%6+1)+'.jpg');
		$('img:odd').attr('src','img/'+(cishu%6+1)+'.jpg');
		for(var i=0;i<$('li').length;i++){//设定各个p中的图片的位置
			$('.one').eq(i).css('top',-i*100)
			$('.one').eq(i).css('z-index',0)
			$('.two').eq(i).css('top',-i*100)
			$('.two').eq(i).css('z-index',1)
		};
	}
	baiyechuang();
		$('ul:first').click(function(){
			$('p:even').animate({height:0},2000,function(){
			cishu++;
			baiyechuang();
				
			});
			
		})
			
		
	})
		
	</script>
	<body>
		<ul>
			<li>
				<img src="img/1.jpg">
				<img src="img/2.jpg">
			</li>
			<li>
				<img src="img/1.jpg">
				<img src="img/2.jpg">
			</li>
			<li>
				<img src="img/1.jpg">
				<img src="img/2.jpg">
			</li>
			<li>
				<img src="img/1.jpg">
				<img src="img/2.jpg">
			</li>
			<li>
				<img src="img/1.jpg">
				<img src="img/2.jpg">
			</li>
		</ul>
		
	</body>
</html>
